<template>
  <div class="back-to-top" @click="backToTop" v-show="showReturnToTop" @mouseenter="show" @mouseleave="hide">
    <i :class="[bttOption.iClass]" :style="{color:bttOption.iColor,'font-size':bttOption.iFontsize}"></i>
    <span class="tips" :class="[bttOption.iPos]" :style="{color:bttOption.textColor}" v-show="showToolTips">{{bttOption.text}}</span>
  </div>
</template>
<style scoped lang="scss" rel="stylesheet/scss">
  @import "./backtop.scss";
</style>
<script type="text/ecmascript-6">
  import {ScrollIt} from 'common/js/scrollUtil.js' // 过渡动画实现
  export default {
    props: {
      text: { // 文本提示
        type: String,
        default: 'TOP'
      },
      textColor: { // 文本颜色
        type: String,
        defalut: '#02A89A'
      },
      iPos: { // 文本位置
        type: String,
        default: 'right'
      },
      iClass: { // 图标形状
        type: String,
        default: 'icon-top'
      },
      iColor: { // 图标颜色
        type: String,
        default: '#f00'
      },
      iFontsize: { // 图标大小
        type: String,
        default: '32px'
      },
      pageY: { // 默认在哪个视图显示返回按钮
        type: Number,
        default: 400
      },
      transitionName: { // 过渡动画名称
        type: String,
        default: 'linear'
      }
    },
    data() {
      return {
        showToolTips: false,
        showReturnToTop: false
      }
    },
    computed: {
      bttOption() {
        return {
          text: this.text,
          textColor: this.textColor,
          iPos: this.iPos,
          iClass: this.iClass,
          iColor: this.iColor,
          iFontsize: this.iFontsize
        }
      }
    },
    methods: {
      show() { // 显示隐藏提示文字
        this.showToolTips = true
      },
      hide() {
        this.showToolTips = false
      },
      currentPageYOffset() {
        window.pageYOffset > this.pageY ? this.showReturnToTop = true : this.showReturnToTop = false
      },
      backToTop() {
        ScrollIt(0, 1500, this.transitionName, this.currentPageYOffset)
      }
    },
    created() {
      window.addEventListener('scroll', this.currentPageYOffset)
    },
    beforeDestory() {
      window.removeEventListener('scroll', this.currentPageYOffset)
    }
  }
</script>
